<script lang="ts" setup>
import { commonTransform } from '@/utils/transform';
import { deleteProduct, searchProduct, updateProduct } from '@/api/product';

import type { ColumnsType } from 'ant-design-vue/es/table';
import type { IProduct, ISearchParams, } from '@/types/request';
import type { TransformProduct, TransformValueOfProduct } from '@/types/table-transform';

function transformProduct(product: IProduct): TransformProduct {
  return {
    ...commonTransform(product),
  }
}

const colums = ref<ColumnsType>([
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    ellipsis: true,
    align:'center',
    width: 280,
    fixed: true
  },
  {
    title: '缩略图',
    dataIndex: 'cover_img',
    key: 'cover_img',
    notShowInput: true,
    ellipsis: true,
    align:'center',
    width: 110,
    showImage: true
  },
  {
    title: '原价',
    dataIndex: 'old_amount',
    key: 'old_amount',
    align:'center',
    width: 100
  },
  {
    title: '现价',
    dataIndex: 'amount',
    key: 'amount',
    align:'center',
    width: 100
  },
  {
    title: '简介',
    dataIndex: 'summary',
    key: 'summary',
    notShowInput: true,
    ellipsis: true,
    align:'center',
    width: 100
  },
  {
    title: '浏览量',
    dataIndex: 'uv',
    align:'center',
    key: 'uv',
    width: 150
  },
  {
    title: '购买量',
    dataIndex: 'buy_num',
    key: 'buy_num',
    align:'center',
    width: 150
  },
  {
    title: '网盘地址',
    dataIndex: 'bd_zip_url',
    key: 'bd_zip_url',
    notShowInput: true,
    showTextarea: true,
    align:'center',
    width: 300
  },
  {
    title: '笔记地址',
    dataIndex: 'note_url',
    key: 'note_url',
    ellipsis: true,
    notShowInput: true,
    showTextarea: true,
    align:'center',
    width: 188
  },
  {
    title: '总评分',
    dataIndex: 'total_point',
    key: 'total_point',
    notShowInput: true,
    align:'center',
    width: 80
  },
  {
    title: '内容实用',
    dataIndex: 'content_point',
    key: 'content_point',
    notShowInput: true,
    align:'center',
    width: 88
  },
  {
    title: '简洁易懂',
    dataIndex: 'easy_point',
    key: 'easy_point',
    notShowInput: true,
    align:'center',
    width: 88
  },
  {
    title: '逻辑清晰',
    dataIndex: 'logic_point',
    key: 'logic_point',
    notShowInput: true,
    align:'center',
    width: 88
  }
])

let realDataSource = ref<TransformProduct[]>([])

const searchParams = reactive<ISearchParams>({
  page: 1,
  size: 6,
  total: 0,
  condition: '',
})
async function handleRequest() {
  const response = await searchProduct(searchParams)
  realDataSource.value = response.data?.current_data?.map(item => transformProduct(item))
  return response
}

async function handleDelete(id: string) {
  return await deleteProduct(id)
}

async function handleUpdate(toUploadData: TransformValueOfProduct) {
  return await updateProduct(toUploadData)
}

// ====== Custom ======
const summaryModalInfo = ref({
  visible: false,
  editState: false,
  currentIndex: -1,
})
function showSummaryModal(index: number, isEditor: boolean = false) {
  summaryModalInfo.value.visible = true
  summaryModalInfo.value.currentIndex = index
  summaryModalInfo.value.editState = isEditor
}
</script>

<template>
  <div>
    <Search name="课程" :on-search-request="handleRequest" :searchParams="searchParams" />
    <Table custom :scroll="{ x: 1800 }" ref="table" :searchParams="searchParams" :expand-columns="colums"
      :real-data-source="realDataSource" :on-request="handleRequest" :on-update="handleUpdate" :on-delete="handleDelete">
      <template #default="{ column, editState, record, index }">
        <template v-if="column.key === 'summary'">
          <a-button v-if="!editState" type="primary" @click="showSummaryModal(index)" style="background-color:#1677ff">查看</a-button>
          <a-button v-else type="primary" @click="showSummaryModal(index, true)" style="background-color:#1677ff">修改</a-button>
        </template>
      </template>
    </Table>
    <!-- 简介弹窗 -->
    <a-modal v-model:open="summaryModalInfo.visible" :title="`${summaryModalInfo.editState ? '编辑' : '查看'}简介内容`"
      :footer="null" width="55vw" @cancel="summaryModalInfo.visible = false">
      <div v-if="!summaryModalInfo.editState" v-html="realDataSource[summaryModalInfo.currentIndex].summary.value" />
      <Editor v-else placeholder="编辑简介内容……"
        v-model:content="realDataSource[summaryModalInfo.currentIndex].summary.value" />
    </a-modal>
  </div>
</template>

<style scoped>
.upload {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 32px;
  text-align: center;
}
</style>